<template>
  <div>

    <el-row>
      <!-- <el-button size="mini" type="info" @click="doprintsee">打印预览</el-button> -->
      <el-button size="mini" type="success" @click="doprint">打印</el-button>
    </el-row>
    <div v-show="false">
      <div id="printrecord" class="tankuang">
        <!-- <div v-for="item in tableData2" :key="item" class="fuji">
          <p align="center" style="font-size:24px;margin:50px 0 20px 0;">年度员工培训计划</p>
          <el-table
            :data="item"
            :cellStyle="rowStyle"
            :headerCellStyle="tableHeaderColor"
            style="width: 599px;border:1px solid #333;"
          >
            <el-table-column
              align="center"
              prop="hash.tcontent"
              width="177.9px"
              height="60px"
              label="培训内容"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="hash.ttypename"
              width="120px"
              height="60px"
              label="培训形式"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="hash.duixiang"
              width="180px"
              height="60px"
              label="培训对象"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="hash.pre_begintime"
              width="120px"
              height="60px"
              label="培训时间"
            ></el-table-column>
          </el-table>
          <div class="ziji">
            <p style="float:left;margin-right:160px">编制：</p>
            <p style="float:left;margin-right:180px">审批：</p>
            <p style="float:right;">
              <span style="margin-right:40px;">年</span>
              <span style="margin-right:40px;">月</span>
              <span style="margin-right:50px;">日</span>
            </p>
          </div>
          <p style="height:140px;"></p>
        </div> -->
        <p style="display:flex;justify-content:flex-end">
          <span style="margin-right:20px;font-size:16px">JBR/QR18-2</span>
        </p>
        <table width="99%">
          <thead>
            <tr style="border:0">
              <th colspan="4" style="border:0;height:50px;line-height:50px;font-size:20px;text-align:center;font-weight:600;color:#333">年度员工培训计划</th>
            </tr>
            <tr>
              <th>培训内容</th>
              <th style="width:80px">培训形式</th>
              <th>培训对象</th>
              <th style="width:150px">培训时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index" style="height:60px">
              <td>{{item.hash.tcontent}}</td>
              <td>{{item.hash.ttypename}}</td>
              <td>{{item.hash.duixiang}}</td>
              <td>{{item.hash.pre_begintime}}至{{item.hash.pre_endtime}}</td>
            </tr>
            <tr style="border:0;">
              <td colspan="4" style="border:0;">
                <div style="display:flex;justify-content:space-evenly">
                  <span>编制：</span>
                  <span>审批：</span>
                  <span>年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;日</span>
                </div>
              </td>

            </tr>
          </tbody>

        </table>
      </div>
    </div>
    <el-divider></el-divider>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column align="center" type="index" width="50" v-if="!ischeck"></el-table-column>
      <el-table-column align="center" prop="hash.tcontent" label="培训内容"></el-table-column>
      <el-table-column align="center" prop="hash.ttypename" label="培训形式"></el-table-column>
      <el-table-column align="center" prop="hash.duixiang" label="培训对象"></el-table-column>
      <el-table-column label="培训时间">
        <template slot-scope="scope">{{scope.row.hash.pre_begintime}}至{{scope.row.hash.pre_endtime}}</template>
      </el-table-column>

    </el-table>
    <el-pagination
      v-if="!ischeck"
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      dialogVisible: false,
      tableData2: [],

    };
  },
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    pagobj: {
      type: Object,
      required: true,
    },
    ischeck: Boolean,
  },
  created() {
    for (let i = 0; i < this.tableData.length; i += 14) {
      let arr1 = [];
      arr1 = this.tableData.slice(i, i + 14);
      this.tableData2.push(arr1);
    }
  },

  methods: {

    rowStyle({
      row, column, rowIndex, columnIndex,
    }) {
      if (columnIndex !== 0) {
        return 'border-top:1px solid #333;border-left:1px solid #333;';
      }
      return 'border-top:1px solid #333';
    },

    // 修改table header的样式
    tableHeaderColor({
      row, column, rowIndex, columnIndex,
    }) {
      if (rowIndex === 0 && columnIndex != 3) {
        return 'border-right:1px solid #333';
      }
    },
    handleCurrentChange() {
      this.$parent.getplanyearlist();
    },
    doprintsee() {
      this.dialogVisible = true;
    },
    doprint() {
      if (this.tableData.length == 0) {
        this.$message({
          type: 'error',
          message: ' 暂无可打印数据',
        });
        return;
      }
      this.$nextTick(() => {
        const detailContent = document.getElementById('printrecord');
        Print('#printrecord');
      });
    },
  },
};
</script>
<style scoped>
.tankuang {
  font-size: 24px;
  font-family: "宋体";
}
.tankuang p {
  font-size: 16px;
}
.fuji {
  position: relative;
}
.ziji {
  position: absolute;
  bottom: 50px;
  right: 20px;
}
/* .fuji .el-table--border td {
  border-right: 1px solid #000;
  border-top: 1px solid #000;
} */
.bodert {
  border: 1px solid #333;
  color: red;
}
table {
  text-align: center;
  padding-left: 30px;
  border-collapse: collapse;
}
table td,
th {
  border: 1px solid #333;
  font-size: 14px;
  height: 40px;
  font-weight: normal
}
</style>
